<template>
  <div class="placehub">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>车位管理</el-breadcrumb-item>
      <el-breadcrumb-item>车位列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片试图区 -->
    <el-card class="box_card">
      <!-- 顶部搜索区域 -->
      <!-- 车牌号搜索 -->
      <el-row :gutter="20">
        <!-- 车位标识查询 -->
        <el-col :span="8">
          <el-input
            class="input-with-select"
            placeholder="车位标识搜索"
            v-model.trim="place_number_search"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="placebt()"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-input
            class="input-with-select"
            placeholder="车牌号搜索"
            v-model.trim="car_number_search"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="carnumber()"
            ></el-button>
          </el-input>
        </el-col>
        <!-- 添加车位 -->
        <el-col :span="6">
          <el-dropdown @command="handleCommand">
            <el-button type="primary">
              增加车位<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">1</el-dropdown-item>
              <el-dropdown-item command="2">2</el-dropdown-item>
              <el-dropdown-item command="3">3</el-dropdown-item>
              <el-dropdown-item command="4">4</el-dropdown-item>
              <el-dropdown-item command="5">5</el-dropdown-item>
              <el-dropdown-item command="6">6</el-dropdown-item>
              <el-dropdown-item command="7">7</el-dropdown-item>
              <el-dropdown-item command="8">8</el-dropdown-item>
              <el-dropdown-item command="9">9</el-dropdown-item>
              <el-dropdown-item command="10">10</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <!-- 车辆信息列表区 -->
      <el-table :data="placelist" border stripe class="tabel_box">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="车位号" prop="place_number">
          <template slot-scope="scope">
            {{ scope.row.place_number }}号车位
          </template>
        </el-table-column>
        <el-table-column label="车牌号" prop="car_number">
          <template slot-scope="scope">
            <span>{{ scope.row.car_number !== null ? scope.row.car_number : '空位' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="车辆状态" prop="car_state">
           <template slot-scope="scope">
            <span>{{scope.row.car_state==='0' ? "故障" : "正常"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="车位" prop="place_state">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.place_state.toLowerCase() === 'true'"
              @change="modifyplacestate(scope.row, scope.$index)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="车位开放状态" prop="place_state">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="delplacemsg(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <div class="page_box" v-if="ispage">
        <el-pagination
          :background="true"
          :page-count="pager_count"
          @current-change="handleCurrentChange"
          :layout="col"
          :total="count_total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      placelist: [], //车位列表
      car_number_search: null, //车牌号搜索
      place_number_search: null, //车位标识搜索
      pager_count: 1, // 当前页码
      count_total: 0, // 总页数
      col: "prev, pager, next, jumper,slot", //开启的配置
      ispage: true, // 是否显示分页
    };
  },
  mounted() {
    this.getplace(); //获取车位信息
  },
  watch: {
    count_total(newVal) {
      if (newVal === 10) {
        this.ispage = false;
      }else{
        this.ispage = true;
      }
    },
  },
  methods: {
    // 封装获取信息列表
    funplaceinfo(parameter) {
      this.$getapi("/place/get", parameter, "json")
        .then((res) => {
          if (res.code === 200) {
            this.placelist = res.data;
            this.count_total = res.count * 10;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },

    // 获取车位列表
    getplace() {
      let par = {
        page: this.pager_count,
      };
      this.funplaceinfo(par);
    },
    // 根据车牌号搜索
    carnumber() {
      let par = {
        car_number: this.car_number_search,
      };
      this.funplaceinfo(par);
    },

    // 根据车位标识搜索
    placebt() {
      let par = {
        place_number: this.place_number_search,
      };

      this.funplaceinfo(par);
    },
    // 增加车位提示消息
    handleCommand(command) {
      this.$confirm(`确定要增加${command}个车位吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.addplace(command);
        })
        .catch(() => {});
    },
    // 添加车位
    addplace(num) {
      this.$postapi("/place/add", { num: num })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.getplace();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    // 跳转
    handleCurrentChange(val) {
      this.pager_count = val;
      this.getplace();
    },
    // 修改车位状态
    modifyplacestate(row, i) {
      this.$postapi("/place/modify/state", { place_id: row.place_id }, "json")
        .then((res) => {
          if (res.code === 200) {
            if (res.static === "True") {
              this.placelist[i].place_state = res.static;
              this.getplace();
            } else if (res.static === "False") {
              this.placelist[i].place_state = res.static;
              this.getplace();
            }
            this.$message.success(`${row.place_number}号` + res.msg);
          } else if (res.code === 404) {
            this.$message.warning(res.msg);
          } else {
            this.$$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    // 删除车位提示
    delplacemsg(val){
      this.$confirm(`确定要删除${val.place_number}号车位吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delplace(val)
        })
        .catch(() => {});
    },
    // 删除车位
    delplace(val){
      this.$deleteapi('/place/del',{place_id:val.place_id}).then(res=>{
        if (res.code===200){

          this.$message.success(`${val.place_number}号车位${res.msg}`)
          this.getplace()//刷新
        }else if(res.code===404){
          this.$message.warning(res.msg)
        }else{
          this.$message.error(`${val.place_number}号车位${res.msg}`)
        }
      }).catch(error=>{
        this.$message.error(error)
      })
    },
  },
};
</script>

<style lang="less" scoped>
.placehub {
  .box_card {
    margin-top: 20px;
    .tabel_box {
      margin-top: 10px;
    }
    .page_box {
      margin-top: 20px;
    }
  }
}
</style>